<template>
    <div>
             <!-- 搜索栏 -->
      <el-card id="serach">
        <el-row>
          <el-col :span="20">
            <el-input
              placeholder="用户名"
              clearable
            ></el-input>
            <el-button
              type="success"
              plain
              icon="el-icon-search"
              @click="getUserList"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-card>
      <el-table :data="comments" :sortable="true">
        <el-table-column prop="user" label="用户" sortable></el-table-column>
        <el-table-column prop="comment" label="评论"></el-table-column>
        <el-table-column prop="status" label="状态" sortable>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '已审核'" type="success">已审核</el-tag>
            <el-tag v-else type="danger">待审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button v-if="scope.row.status === '待审核'" size="mini" @click="changeStatus(scope.row)">审核通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        comments: [
          { user: '用户A', comment: '这是一条已审核评论', status: '已审核' },
          { user: '用户B', comment: '这是一条待审核评论', status: '待审核' },
          { user: '用户C', comment: '这是一条待审核评论', status: '待审核' }
        ]
      };
    },
    methods: {
      changeStatus(comment) {
        comment.status = '已审核';
      }
    }
  }
  </script>